<template>
	<view class="content">
		<empty v-if="jyclassList.length === 0 && !firstLoad"></empty>
		<view class="jyclass m-t">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in jyclassList"  :key="index" @click="navToDetailPage(item,'/pages/jyclass/show?id='+item.id)">
					<view class="uni-media-list">
						<view class="uni-media-list-logo">
							<image :src="item.nav_list_logo" mode="aspectFill"></image>
						</view>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top uni-ellipsis">{{item.nav_name || ''}}</view>
							<!-- nav_video_status · 用时{{item.allCount || 0}} -->
							<view class="uni-media-list-text-bottom uni-ellipsis">已学{{item.userCount || '0'}} </view>
							<view class="uni-media-list-text-bottom uni-ellipsis" v-if="item.course && item.course.course_name">学习至-{{item.course.course_name || ''}}</view>
							<view class="btn">继续学习</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				loadingType: 'more', //加载更多状态
				jyclassList: [],
				empty: false,
				first: 0,
				count: 10,
				firstLoad: true,
				page: 1,
			}
		},
		watch:{
			//显示空白页
			jyclassList(e){
				
				let empty = e.length === 0 ? true: false;
				if(this.empty !== empty){
					console.log(12333,e)
					this.empty = empty;
				}
			}
		},
		onLoad(options){
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			this.cateId = options.tid;
			//this.loadCateList(options.fid,options.sid);
			this.loadData();
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1;
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			if(this.loadingType === 'loading'){
				return false;
			}
			this.page++;
			this.loadData('add');
		},
		methods: {
			cutText(item){
				if(item && item.description){
					return item.description.substring(0,25);
				}else{
					return '';
				}
			},
			//加载，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				let params = {};
				params.page = this.page;
				params.pagesize = 10;
				// let jyclassList = await this.$api.json('jyclassList');
				await this.$http.post('api/user/usernav').then(res=>{
					this.firstLoad  = false;
					if(type === 'refresh'){
						this.jyclassList = [];
					}
					let jyclassList = res.data.list || [];
					this.jyclassList = jyclassList;//.slice(0, 2);
					
					//判断是否还有下一页，有是more  没有是nomore
					this.loadingType  = this.jyclassList.length < params.pagesize ? 'nomore' : 'more';
					if(type === 'refresh'){
						if(loading == 1){
							uni.hideLoading()
						}else{
							uni.stopPullDownRefresh();
						}
					}
				}).catch(err=>{
					console.log(err);
				})
				
			},
			//详情
			navToDetailPage(item,url) {
				//
				let nav_video_status = item.nav_video_status,
					params = {};
				switch(nav_video_status){
					case 1:
					//就业班
						url = '/pages/jyclass/video';
						params = item.course;
						params.nav_id = item.nav_id;
						break;
					case 2: 
					//小课
						url = '/pages/course/video';
						params = item.course;
						break;
					
				};
				
				this.$mHelper.navTo(url,'push',params);
				/* uni.navigateTo({
					url: url
				}) */
			},
		},
	}
</script>
